@import 'common.less';

.my{
  width: 750/@rem;height: 100%;position: fixed;left: 50%;top: 0;background: url("/src/img/mybg.jpg");background-size: 750/@rem auto;box-sizing: border-box;padding-bottom: 89/@rem;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  .mybox{
    width: 586/@rem;height: 100%;margin: 0 auto;overflow: auto;padding: 0 82/@rem;
    .userpic{
      text-align: center;margin-top: 89/@rem;
      img{width: 126/@rem;height: 126/@rem;vertical-align: middle;border-radius: 252/@rem;}
    }
    .title{
      font-size: 32/@rem;line-height: 36/@rem;text-align: center;color: #020202;margin-top: 30/@rem;
      em{padding: 0 15/@rem;color: #f03f58;font-style: normal;}
    }
    .mylucky{
      width: 198/@rem;height: 190/@rem;background: url("/src/img/drawed.png");background-size: 198/@rem 228/@rem;margin: 20/@rem auto 0;text-align: center;padding-top: 38/@rem;
      p{color: #f0c2c3;font-size: 32/@rem;line-height: 46/@rem;}
      p.money{color: #fbaa41;font-size: 40/@rem;line-height: 50/@rem;margin: 5/@rem 0 10/@rem;}
    }
    .mybox-link{
      text-align: center;margin-top: 20/@rem;
      a{background: url("/src/img/homebtn1.png");background-size: 184/@rem 61/@rem;width: 184/@rem;height: 61/@rem;display: inline-block;}
    }
    .line{border-bottom: 1/@rem solid #a59c93;margin-top: 20/@rem;}
    .my-img1{
      display: block;margin-top: 28/@rem;
      img{width: 100%;vertical-align: middle;}
    }
    .my-img2{
      display: block;margin: 45/@rem 0 30/@rem;
      img{width: 100%;}
    }
  }
  .mybtn{
    display: block;width: 750/@rem;color: #fff;margin-top: 60/@rem;background: #f03f58;font-size: 32/@rem;height: 88/@rem;line-height: 88/@rem;text-align: center;position: fixed;left: 0;bottom: 0;
  }
}
.luckydrawbox{
  position: fixed;left: 50%;top: 0;width: 750/@rem;height: 100%;background: rgba(0,0,0,0.8);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  .luckydraw{
    position: fixed;left: 50%;top: 50%;width: 494/@rem;height: 635/@rem;border-radius: 10/@rem;background-size: 494/@rem 635/@rem;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    .luckydraw-close{
      width: 81/@rem;height: 81/@rem;position: absolute;left: 50%;bottom: -126/@rem;border-radius: 162/@rem;background-size: 81/@rem 81/@rem;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
    }
    &:before{content: "";width: 0;height: 46/@rem;position: absolute;left: 50%;bottom: -46/@rem;
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);}
    .title{font-size: 63/@rem;line-height: 63/@rem;text-align: center;margin-top: 78/@rem;}
    .subtitle{font-size: 32/@rem;line-height: 32/@rem;text-align: center;margin-top: 18/@rem;}
    .luckydraw-center{width: 138/@rem;height: 118/@rem;background: #fbaa41;border: 7/@rem solid #de6c35;border-radius: 304/@rem;position: absolute;left: 172/@rem;top: 228/@rem;font-size: 50/@rem;line-height: 50/@rem;color: #b70933;font-weight: bold;text-align:center;padding-top: 20/@rem;}
    .luckdraw-sharebtn{width: 213/@rem;height: 74/@rem;line-height: 74/@rem;border-radius: 160/@rem;position: absolute;left: 141/@rem;top: 433/@rem;text-align: center;font-size: 32/@rem;}
    .luckydrawtips-ok{
      width: 422/@rem;padding: 0 36/@rem;font-size: 20/@rem;color: #e0a3b1;line-height: 32/@rem;position: absolute;left: 0;top: 530/@rem;
      em{color: #ff9d1d;font-style: normal;}
    }
    .luckydrawtips-fail{width: 422/@rem;padding: 0 36/@rem;font-size: 20/@rem;color: #999;line-height: 32/@rem;position: absolute;left: 0;top: 530/@rem;text-align: center;}
  }
  .luckydrawok{
    background-image: url("/src/img/luckydraw-ok.png");
    .luckydraw-close{background-image: url("/src/img/luckydraw-ok-close.png");}
    &:before{border-left: 4/@rem solid #ca0d3a;}
    .title, .subtitle{color: #fff;}
    .luckdraw-sharebtn{border: 3/@rem solid #d74047;color: #f0c2c3;}
  }
  .luckydrawfail{
    background-image: url("/src/img/luckydraw-fail.png");
    .luckydraw-close{background-image: url("/src/img/luckydraw-fail-close.png");}
    &:before{border-left: 4/@rem solid #8a8a8a;}
    .title, .subtitle{color: #d0d0d0;}
    .luckdraw-sharebtn{border: 3/@rem solid #f09509;color: #f09509;}
  }
}
.share{position: fixed;left: 50%;top: 0;width: 750/@rem;height: 100%;background: rgba(0,0,0,0.7) url("/src/img/share.png") no-repeat;background-size: 750/@rem auto;z-index: 3;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);}


.formtips{padding: 20/@rem 40/@rem;position: fixed;left: 50%;top: 50%;border-radius: 8/@rem;background: rgba(0,0,0,0.8);color: #fff;font-size: 20/@rem;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);}

.uploadLoding{position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: url("/src/img/loading.png") no-repeat center;background-size: 26/@rem 26/@rem;animation:circle 1s infinite linear;}